vue与webpack
由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西，开发过程中需要改动到build和config里面一些相关的配置，所以刚好趁此机会将所有配置文件看一遍，理一理思路，也便于以后修改配置的时候不会“太折腾”。1、首先我们在构建vue项目后，就得先了解vue的项目结构├── build ----------------...
2024-01-10
webpack-merge 的用法
在实际开发中，开发环境和生产环境提供了两份配置文件，绝大多数的配置都是相同的，差异仅仅体现在mode: 为 development 或 production在 development 环境需要配置 devServer，和为 devServer 注入 html 所使用的 plugins.HTMLWebpackPlugin通过 webpack-merge 可以将基础的配置抽象到 webpack.base.js 中，开发环境和线上环境分...
2024-01-10
webpack安装vue-loader
npm install --save-dev vue-loader vue-template-compiler打开 webpack.config.js文件添加配置信息module.exports={ entry:'/src/main.js',//入口文件 output:{filename:'bundle.js'}, module:{ rules:[ //可配置多个loader匹配规则 { test:/\.vue$/, use:{ ...
2024-01-10
webpack react基础配置一
简单介绍webpack react基本配置，入门型：环境配置：依赖nodejs，官网下载最新版的nodejs：nodejs.org/en 安装完nodejs npm便自动集成了，通过npm安装其他环境$ npm install webpack -g 安装webpack 当然如果常规项目还是把依赖写入 package.json 包去更人性化：$ npm init$ npm install webpack --save-dev 打开项...
2024-01-10webpack的tree shaking的实现方法
webpack的tree shakingutil.jsexport const a = () => { console.log("a123456方法");};export const b = () => { console.log("b123456方法");};main.jsimport {a} from './utils';a();sideEffects一般而言，上述代码，在 webpack 进行 tree shaking 能够不打包 function b 的代码，这是因为 webpack 对代码进行了分...
2024-01-10vue webpack打包优化操作技巧
临近春节，公司很多同事都提前回家过年，剩余人员根据禅道去修改bug，当bug修正完毕以后，我们需要重新打包给运维，上测试服给测试同事提测，但是由于项目本体比较庞大，所以打包时间太过漫长（二十五分钟以上:sob:），所以有了打包优化的想法（其实想法早就有了，但是因为平时工作计划比较...
2024-01-10
webpack css样式不生效
过程都是按照官网走的，但是样式就是不生效。1.目录2.index.html~~~~3.index.js4.style.css5.webpack.config.js6.package.json回答用了style-loader的话，样式是保存在在 .js文件中的。然后就是在浏览器里确认一下div标签上是否有hello这个class...
2024-01-10webpack-dev-server找不到模块“ webpack”
我正在尝试使用webpack-dev-server运行一个简单的程序，但出现此错误：module.js:471 throw err; ^Error: Cannot find module 'webpack' at Function.Module._resolveFilename (module.js:469:15) at Function.Module._load (module.js:417:25) at Module.require (module.js:497:17) ...
2024-01-10
vue爬坑之路（webpack 配置篇）
在vue cli下1.npm run dev 打开浏览器在config的index.js中修改autoOpenBrowser为true 关闭sourcemapproductionSourceMap: false 文件过大处理方案IE兼容方案在IE中出现报错:host/origin header,需要配置webpack.dev.conf.js在devServer中添加disableHostCheck: true即可https://blog.csdn.net/qq_26708777/article/detail...
2024-01-10vue按需加载组件webpack require.ensure的方法
vue-cli是由vue官方发布的快速构建vue单页面的脚手架。使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体,打包位置是 dist/static/js/app.[contenthash].js 类似下面的路由代码router/index.js 路由相关信息,该路由文件引入了多个 .vue组件import Hello from '@/components/Hello'import Prov...
2024-01-10
Vue 与 webpack手动配置
上篇webpack入门，将常用重要点过了一下，这篇是手动搭建vue中webpack相关指令整理npm init -ynpm i -D webpack webpack-clinpm i vue -Smkdir src cd src touch index.jstouch webpack.config.jsnpm i -D html-webpack-plugin // 编译出html页面npm i -D webpack-dev-server //启动webpack服务 8080npm i -D vu...
2024-01-10
react创建webpack服务器
在创建webpack服务器之前首先要能够 npm start 启动成功，但是由于我之前的错误操作，导致它一直启动不起来原因：是启动的位置被我切换错了，你启动npm的时候，必须在 package.json的文件下，此时会启动成功1.创建webpack服务器（注意：webpack的服务器是基于nodejs） 1.webpack服务器全局安装命令：npm ...
2024-01-10
vue用webpack打包时引入es2015插件
1、安装依赖包$ npm install --save-div babel-preset-es2015ps：babel-loader、babel-core应该是默认装好的，如果没有安装，请重新安装2、修改【webpack.config.js】配置文件找到 /\.js$/的rules，进行修改 { test: /\.js$/, use: [{ loader: 'babel-loader', options: { prese...
2024-01-10
react前端自动化webpack配置
1. npm init2. package.json install dependence webpack webpack-dev-server react react-dom react-hot-loader css-loader style-loader babel babelify babel-loader babel-core babel-preset-es2015 babel-preset-react script start : webpack-dev-server...
2024-01-10
webpack（7）webpack使用vue配置
如果我们想在webpack中使用vue，就需要在webpack中配置vue 配置vue首先，我们需要在项目中安装vue，安装命令如下：npm install vue --save安装完成后，我们在主入口main.js文件中导入vue并创建一个实例import Vue from 'vue'const app = new Vue({ el: "#app", data: { message: "hello" }})最后我们在index.html中，写入模板...
2024-01-10浅谈webpack devtool里的7种SourceMap模式
我们先来看看文档对这 7 种模式的解释：模式解释eval每个module会封装到 eval 里包裹起来执行，并且会在末尾追加注释 //@ sourceURL.source-map生成一个SourceMap文件.hidden-source-map和 source-map 一样，但不会在 bundle 末尾追加注释.inline-source-map生成一个 DataUrl 形式的 SourceMap 文件.eval-source-ma...
2024-01-10
webpack 搭建React（手动搭建）
前言 最近真的都是在瞎学，看到自己不是很明白的东西，都喜欢自己手动去敲1到3遍（晚上下班的时候咯），瞧，React 基于webpack 搭建，react 官方有一套手脚架工具，我自己也搭建过确实挺好使的，适合初学者学习学习。但是自己还是想手动来搭建，嗯 于是写一篇不用手脚架搭建的博客，供自...
2024-01-10
vue webpack 构建项目 git 代码管理
1.全局安装 vue-cli npm install --global vue-cli（如果之前已经全局安装过了 跳过该操作 直接进行2）2.打开项目,初始化为webpack模版的项目vue init webpack3.安装依赖 根据提示进行操作4.初始化成功，直接运行 npm run dev5.成功运行 直接打开 红线链接6.出现下面内容表示项目创建成功7.使用git进行代码管理...
2024-01-10
【Vue】Vue 项目webpack打包图标不显示
有遇到类似问题的嘛 求大神解答下 非常感谢Vue+element项目 webpack打包后 放服务器访问时 项目中的图标都缺失不显示界面报错webpack配置代码回答解决方案： 1、使用webpack打包vue项目，使用font-awsome字体，发现打包之后，font-awsome图标不显示，报错为路径不对 2、build > webpack.base.conf.js 里面loader的设置3、...
2024-01-10
Java 内置Http Server构建web应用案例详解
一、概述使用Java技术构建Web应用时， 我们通常离不开tomcat和jetty之类的servlet容器，这些Web服务器功能强大，性能强劲，深受欢迎，是运行大型Web应用的必备神器。虽然Java的设计初衷就是用来开发大型应用的，然而有时候我们开发的程序只是简单的小型应用，对于功能的需求和性能的要求并不高， 可...
2024-01-10
Vue2+webpack+node 配置+入门+详解
1.vue2.0 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层采用单文件组件复杂大型单页应用程序（SPA）响应式的数据绑定，与组件化的开发HTML中的DOM与其他的部分独立开来划分出一个层次，这个层次就叫做视图层 2.WebpackWebpack是一个前端打包和构建...
2024-01-10
vue项目 webpack打包后，图片路径是绝对路径
vue项目，使用webpack打包，虽然在全局把路径改成了相对的路径，但是图片引用的路径还是异常的，解决办法如下：1、config文件夹下index.js中：assetsPublicPath:"./"背景图片的引用问题上面虽然解决了资源路径的引用问题，但是资源里面的背景图片，不像index.html中加载资源一样，通过./static/js/app.js引用可...
2024-01-10
vue（9）—— 组件化开发 - webpack（3）
前面两个终于把webpack相关配置解析完了。现在终于进入vue的开发了 vue组件化开发预热 前期准备 创建如下项目： app.js: footer.js:main.js:webpack.config.js:同样的生成两个webpack配置文件，webpack.dev.config.js，webpack.prod.config.js，配置跟webpack.config.js一模一样package.json:组件化开发终于到了重头戏了webpa...
2024-01-10
如何减少 webpack 构建 vue 项目的编译时间
背景我司前端项目框架主要是 vue，多个项目聚集在同一个仓库下，共用公共组件、页面、工具函数等。基于以上前提，我们需要对不同的项目分别进行打包，并解决单页应用强制刷新引起的问题，所以没有使用 vue-cli 来创建，而是使用 webpack 重新编写了一套打包流程。随着代码量的增长（百万行级）...
2024-01-10
vue webpack项目如何打包给后台，跟后台对接？
vue webpack项目npm run build之后如何跟后台对接？生成的dist文件夹之后，是直接把dist文件夹给后台就可以了么？回答：对啊, 只要拿dist文件夹里面的东西就行了, 但是要注意, 你后台的根目录和你开发时候的根目录可能不一样. 到时候放上去可能一堆的路径报错. 建议就是先去把config/index.js 的 build.assetsPub...
2024-01-10
